<template>
  <div class="progress box clmcenter">
    <p class="progressbar">加载中...{{ percent }}</p>
  </div>
</template>

<script>
export default {
  name: "LoadingPage",
  data() {
    return {
      count: 0,
      percent: "",
    };
  },
  mounted() {
    this.preload();
  },
  methods: {
    preload() {
      let chooseEat = require.context("../assets/img", false, /\.jpg|png|gif$/);
      let CN = require.context("../assets/img/CN", false, /\.jpg|png|gif$/);
      let CNitemA = require.context(
        "../assets/img/CN/itemA",
        false,
        /\.jpg|png|gif$/
      );
      let CNitemB = require.context(
        "../assets/img/CN/itemB",
        false,
        /\.jpg|png|gif$/
      );
      let CNitemC = require.context(
        "../assets/img/CN/itemC",
        false,
        /\.jpg|png|gif$/
      );
      let CNitemD = require.context(
        "../assets/img/CN/itemD",
        false,
        /\.jpg|png|gif$/
      );
      let CNitemE = require.context(
        "../assets/img/CN/itemE",
        false,
        /\.jpg|png|gif$/
      );
      let CNitemF = require.context(
        "../assets/img/CN/itemF",
        false,
        /\.jpg|png|gif$/
      );
      let CNitemG = require.context(
        "../assets/img/CN/itemG",
        false,
        /\.jpg|png|gif$/
      );
      let CNitemH = require.context(
        "../assets/img/CN/itemH",
        false,
        /\.jpg|png|gif$/
      );
      let EN = require.context("../assets/img/EN", false, /\.jpg|png|gif$/);
      let map = require.context("../assets/img/map", false, /\.jpg|png|gif$/);
      let safety = require.context(
        "../assets/img/safety",
        false,
        /\.jpg|png|gif$/
      );
      let ENitemA = require.context(
        "../assets/img/EN/itemA",
        false,
        /\.jpg|png|gif$/
      );
      let ENitemB = require.context(
        "../assets/img/EN/itemB",
        false,
        /\.jpg|png|gif$/
      );
      let ENitemC = require.context(
        "../assets/img/EN/itemC",
        false,
        /\.jpg|png|gif$/
      );
      let ENitemD = require.context(
        "../assets/img/EN/itemD",
        false,
        /\.jpg|png|gif$/
      );
      let ENitemE = require.context(
        "../assets/img/EN/itemE",
        false,
        /\.jpg|png|gif$/
      );
      let ENitemF = require.context(
        "../assets/img/EN/itemF",
        false,
        /\.jpg|png|gif$/
      );
      let ENitemG = require.context(
        "../assets/img/EN/itemG",
        false,
        /\.jpg|png|gif$/
      );
      let ENitemH = require.context(
        "../assets/img/EN/itemH",
        false,
        /\.jpg|png|gif$/
      );

      // 文件夹图片
      let chooseEatList = [];
      let CNList = [];
      let CNitemAList = [];
      let CNitemBList = [];
      let CNitemCList = [];
      let CNitemDList = [];
      let CNitemEList = [];
      let CNitemFList = [];
      let CNitemGList = [];
      let CNitemHList = [];
      let ENList = [];
      let mapList = [];
      let safetyList = [];
      let ENitemAList = [];
      let ENitemBList = [];
      let ENitemCList = [];
      let ENitemDList = [];
      let ENitemEList = [];
      let ENitemFList = [];
      let ENitemGList = [];
      let ENitemHList = [];
      // 总数据
      let allList = [];
      for (let i = 0; i < chooseEat.keys().length; i++) {
        chooseEatList.push({
          id: 1,
          img: chooseEat.keys()[i].substr(2, chooseEat.keys()[i].length),
        });
      }
      for (let i = 0; i < CN.keys().length; i++) {
        CNList.push({
          id: 2,
          img: CN.keys()[i].substr(2, CN.keys()[i].length),
        });
      }
      for (let i = 0; i < EN.keys().length; i++) {
        ENList.push({
          id: 3,
          img: EN.keys()[i].substr(2, EN.keys()[i].length),
        });
      }
      for (let i = 0; i < map.keys().length; i++) {
        mapList.push({
          id: 4,
          img: map.keys()[i].substr(2, map.keys()[i].length),
        });
      }
      for (let i = 0; i < safety.keys().length; i++) {
        safetyList.push({
          id: 5,
          img: safety.keys()[i].substr(2, safety.keys()[i].length),
        });
      }
      // 文件夹图片
      for (let i = 0; i < CNitemA.keys().length; i++) {
        CNitemAList.push({
          id: 6,
          img: CNitemA.keys()[i].substr(2, CNitemA.keys()[i].length),
        });
      }
      for (let i = 0; i < CNitemB.keys().length; i++) {
        CNitemBList.push({
          id: 7,
          img: CNitemB.keys()[i].substr(2, CNitemB.keys()[i].length),
        });
      }
      for (let i = 0; i < CNitemC.keys().length; i++) {
        CNitemCList.push({
          id: 8,
          img: CNitemC.keys()[i].substr(2, CNitemC.keys()[i].length),
        });
      }
      for (let i = 0; i < CNitemD.keys().length; i++) {
        CNitemDList.push({
          id: 9,
          img: CNitemD.keys()[i].substr(2, CNitemD.keys()[i].length),
        });
      }
      for (let i = 0; i < CNitemE.keys().length; i++) {
        CNitemEList.push({
          id: 10,
          img: CNitemE.keys()[i].substr(2, CNitemE.keys()[i].length),
        });
      }
      for (let i = 0; i < CNitemF.keys().length; i++) {
        CNitemFList.push({
          id: 11,
          img: CNitemF.keys()[i].substr(2, CNitemF.keys()[i].length),
        });
      }
      for (let i = 0; i < CNitemG.keys().length; i++) {
        CNitemGList.push({
          id: 12,
          img: CNitemG.keys()[i].substr(2, CNitemG.keys()[i].length),
        });
      }
      for (let i = 0; i < CNitemH.keys().length; i++) {
        CNitemHList.push({
          id: 13,
          img: CNitemH.keys()[i].substr(2, CNitemH.keys()[i].length),
        });
      }
      for (let i = 0; i < ENitemA.keys().length; i++) {
        ENitemAList.push({
          id: 14,
          img: ENitemA.keys()[i].substr(2, ENitemA.keys()[i].length),
        });
      }
      for (let i = 0; i < ENitemB.keys().length; i++) {
        ENitemBList.push({
          id: 15,
          img: ENitemB.keys()[i].substr(2, ENitemB.keys()[i].length),
        });
      }
      for (let i = 0; i < ENitemC.keys().length; i++) {
        ENitemCList.push({
          id: 16,
          img: ENitemC.keys()[i].substr(2, ENitemC.keys()[i].length),
        });
      }
      for (let i = 0; i < ENitemD.keys().length; i++) {
        ENitemDList.push({
          id: 17,
          img: ENitemD.keys()[i].substr(2, ENitemD.keys()[i].length),
        });
      }
      for (let i = 0; i < ENitemE.keys().length; i++) {
        ENitemEList.push({
          id: 18,
          img: ENitemE.keys()[i].substr(2, ENitemE.keys()[i].length),
        });
      }
      for (let i = 0; i < ENitemF.keys().length; i++) {
        ENitemFList.push({
          id: 19,
          img: ENitemF.keys()[i].substr(2, ENitemF.keys()[i].length),
        });
      }
      for (let i = 0; i < ENitemG.keys().length; i++) {
        ENitemGList.push({
          id: 20,
          img: ENitemG.keys()[i].substr(2, ENitemG.keys()[i].length),
        });
      }
      for (let i = 0; i < ENitemH.keys().length; i++) {
        ENitemHList.push({
          id: 21,
          img: ENitemH.keys()[i].substr(2, ENitemH.keys()[i].length),
        });
      }

      // 合并数据
      allList = chooseEatList.concat(
        CNList,
        ENList,
        mapList,
        safetyList,
        CNitemAList,
        CNitemBList,
        CNitemCList,
        CNitemDList,
        CNitemEList,
        CNitemFList,
        CNitemGList,
        CNitemHList,
        ENitemAList,
        ENitemBList,
        ENitemCList,
        ENitemDList,
        ENitemEList,
        ENitemFList,
        ENitemGList,
        ENitemHList
      );
      // 合并数据
      // 根据层级追加目录路径前缀 1chooseEat 2end 3home 4lamp
      this.allList = allList;
      for (let b in allList) {
        var image = new Image();
        if (allList[b].id === 1) {
          image.src = require("../assets/img/" + allList[b].img);
        }
        if (allList[b].id === 2) {
          image.src = require("../assets/img/CN/" + allList[b].img);
        }
        if (allList[b].id === 3) {
          image.src = require("../assets/img/EN/" + allList[b].img);
        }
        if (allList[b].id === 4) {
          image.src = require("../assets/img/map/" + allList[b].img);
        }
        if (allList[b].id === 5) {
          image.src = require("../assets/img/safety/" + allList[b].img);
        }
        if (allList[b].id === 6) {
          image.src = require("../assets/img/CN/itemA/" + allList[b].img);
        }
        if (allList[b].id === 7) {
          image.src = require("../assets/img/CN/itemB/" + allList[b].img);
        }
        if (allList[b].id === 8) {
          image.src = require("../assets/img/CN/itemC/" + allList[b].img);
        }
        if (allList[b].id === 9) {
          image.src = require("../assets/img/CN/itemD/" + allList[b].img);
        }
        if (allList[b].id === 10) {
          image.src = require("../assets/img/CN/itemE/" + allList[b].img);
        }
        if (allList[b].id === 11) {
          image.src = require("../assets/img/CN/itemF/" + allList[b].img);
        }
        if (allList[b].id === 12) {
          image.src = require("../assets/img/CN/itemG/" + allList[b].img);
        }
        if (allList[b].id === 13) {
          image.src = require("../assets/img/CN/itemH/" + allList[b].img);
        }
        if (allList[b].id === 14) {
          image.src = require("../assets/img/EN/itemA/" + allList[b].img);
        }
        if (allList[b].id === 15) {
          image.src = require("../assets/img/EN/itemB/" + allList[b].img);
        }
        if (allList[b].id === 16) {
          image.src = require("../assets/img/EN/itemC/" + allList[b].img);
        }
        if (allList[b].id === 17) {
          image.src = require("../assets/img/EN/itemD/" + allList[b].img);
        }
        if (allList[b].id === 18) {
          image.src = require("../assets/img/EN/itemE/" + allList[b].img);
        }
        if (allList[b].id === 19) {
          image.src = require("../assets/img/EN/itemF/" + allList[b].img);
        }
        if (allList[b].id === 20) {
          image.src = require("../assets/img/EN/itemG/" + allList[b].img);
        }
        if (allList[b].id === 21) {
          image.src = require("../assets/img/EN/itemH/" + allList[b].img);
        }
        // 图片加载
        image.onload = () => {
          this.count++;
          // 计算图片加载的百分数，绑定到percent变量
          let percentNum = Math.floor((this.count / this.allList.length) * 100);
          this.percent = `${percentNum}%`;
        };
      }
    },
  },
  watch: {
    percent: function (val) {
      // console.log(val);
      if (val === "100%") {
        // 图片加载完成后
        this.$router.replace("/index");
      }
    },
  },
};
</script>
<style lang="less" scoped>
.progress {
  p {
    font-size: 2rem;
    padding-top: 1rem;
  }
}
</style>
